import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
} from 'antd';
import SelectDeptTree from '@/components/SelectDeptTree';
const FormItem = Form.Item;
const { Option } = Select;


//新增表单
//let getDeptTreeBySelectTree;
//let getOrganTreeBySelectTree;
//const CreateForm = Form.create()(props => {
//	const {
//		modalVisible,
//		form,
//		handleAdd,
//		handleModalVisible,
//		dispatch,
//		selectDeptTree,
//		selectOrganTree,
//		requestModelName,
//		authForUser,
//	} = props;
//
//	
//	const selectedDeptTreeValue = (deptRecord) => {
//		getDeptTreeBySelectTree = deptRecord;
//	}
//
//	const selectedOrganTreeValue = (orgRecord) => {
//		getOrganTreeBySelectTree = orgRecord;
//	}
//
//	const parentDeptTreeMethod = {
//		dispatch: dispatch,
//		selectDeptTree: selectDeptTree,
//		selectedDeptTreeValue: selectedDeptTreeValue,
//		requestModelName: requestModelName,
//	}
//
//	const parentOrganTreeMethod = {
//		dispatch: dispatch,
//		selectOrganTree: selectOrganTree,
//		selectedOrganTreeValue: selectedOrganTreeValue,
//		requestModelName: requestModelName,
//	}
//
//	const okHandle = () => {
//		form.validateFields((err, fieldsValue) => {
//			console.log(err);
//			if (err) return;
//			form.resetFields();
//			if(getDeptTreeBySelectTree) {
//				fieldsValue.dept_id = getDeptTreeBySelectTree.triggerNode.props.dataRef.dept_id;
//				fieldsValue.dept = getDeptTreeBySelectTree.triggerNode.props.dataRef.title;
//			}
//			console.log(fieldsValue);
//			handleAdd(fieldsValue);
//		});
//	};
//	return(
//		<Modal
//width={800}
//destroyOnClose
//title="新增"
//visible={modalVisible}
//onOk={okHandle}
//onCancel={() => handleModalVisible()}
//>
//<Form  layout="vertical">
//	
//  
//  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
//
//      <Col  md={12} sm={24}>
//	        <FormItem  label="用户名">
//	            {form.getFieldDecorator('user_name', {
//	            rules: [{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }],
//	            })(<Input placeholder="请输入" />)}
//	        </FormItem>
//      </Col>
//
//
//      <Col  md={12} sm={24}>
//	        <FormItem  label="用户名称">
//	            {form.getFieldDecorator('user_name_cn', {
//	            rules: [{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }],
//	            })(<Input placeholder="请输入" />)}
//	        </FormItem>
//      </Col>
//
//  </Row>
//  
//      
//  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
//  
//		<Col  md={12} sm={24}>
//	        <FormItem  label="密码">
//	            {form.getFieldDecorator('password', {
//	            rules: [{ required: true, message: '请输入至少6个字符的密码！', min: 6 }],
//	            })(<Input placeholder="请输入" />)}
//	        </FormItem>
//      </Col>
//
//     	<Col md={12} sm={24}>
//	        <FormItem label="状态">
//	            {form.getFieldDecorator('enabled',{
//	            	initialValue: "1",
//	            })(
//	                <Select placeholder="请选择" style={{ width: '100%' }}>
//	                	<Option value="1">激活</Option>
//	                    <Option value="0">锁定</Option>
//	                </Select>
//	            )}
//	        </FormItem>
//      </Col>
//      
//            
//  </Row>
//  
//  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
//
//      <Col  md={12} sm={24}>
//	        <FormItem  label="手机">
//	            {form.getFieldDecorator('phone', {
//	            rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
//	            })(<Input placeholder="请输入" />)}
//	        </FormItem>
//      </Col>
//
//
//      <Col  md={12} sm={24}>
//	        <FormItem  label="邮箱">
//	            {form.getFieldDecorator('email', {
//	            rules: [{ required: false}],
//	            })(<Input placeholder="请输入" />)}
//	        </FormItem>
//      </Col>
//
//  </Row>
//
// <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
// 
// 		<Col md={12} sm={24}>
//	        <FormItem label="角色">
//	            {form.getFieldDecorator('auth_ids')(
//	                <Select placeholder="请选择" style={{ width: '100%' }} mode="multiple">
//	                	{authForUser != undefined?authForUser.list.map((item,index) => {
//	                		return <Option value={item.auth_id}>{item.auth_name}</Option>
//	                	}):null}
//	                </Select>
//	            )}
//	        </FormItem>
//      </Col>
//
//      <Col  md={12} sm={24}>
//	        <FormItem  label="部门">
//	        	{form.getFieldDecorator('dept',{
//	        		rules: [{ required: true}],
//	        		initialValue: "",
//	        	})(
//	               	<SelectDeptTree {...parentDeptTreeMethod} />
//	            )}
//	        </FormItem>
//      </Col>
//
//				
//
//
//  </Row>
//
//</Form>
//</Modal>
//	);
//});



@Form.create()
class CreateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	getDeptTreeBySelectTree: "",
	    	confirmDirty: false,
	    }
	}
  
	selectedDeptTreeValue = (deptRecord) => {
		  this.setState({
  			getDeptTreeBySelectTree: deptRecord,
  		})
	}
	
	
	handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
	
	
	okHandle = () => {
		const { form,handleAdd } = this.props;
		const { getDeptTreeBySelectTree } = this.state;
		form.validateFields((err, fieldsValue) => {
//			console.log(err);
//			if(Object.keys(err).length) {
//				console.log(err);
//				Object.keys(err).map((item,index) => {
//					if(item == "dept") {
//						delete err[item];
//					}
//					
//				})
//			}
//			console.log(err);
			if (err) return;
			form.resetFields();
			if(getDeptTreeBySelectTree) {
				fieldsValue.dept_id = getDeptTreeBySelectTree.triggerNode.props.dataRef.dept_id;
				fieldsValue.dept = getDeptTreeBySelectTree.triggerNode.props.dataRef.title;
			}
			
			if(fieldsValue.post) {
				fieldsValue.post_id = fieldsValue.post.key;
				fieldsValue.post_name = fieldsValue.post.label;
			}

			handleAdd(fieldsValue);
		});
	};

  render() {
  		const {
				modalVisible,
				form,
				handleModalVisible,
				selectDeptTree,
				requestModelName,
				authForUser,
				postForUser,
				dispatch
			} = this.props;
	console.log(this.state.getDeptTreeBySelectTree);
	console.log(this.state.getDeptTreeBySelectTree?this.state.getDeptTreeBySelectTree.triggerValue:null);
	const parentDeptTreeMethod = {
		dispatch: dispatch,
		selectDeptTree: selectDeptTree,
		selectedDeptTreeValue: this.selectedDeptTreeValue,
		requestModelName: requestModelName
	}
return (
    <Modal
width={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={this.okHandle}
onCancel={() => handleModalVisible()}
>
<Form  layout="vertical">
	
    
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="用户名">
	            {form.getFieldDecorator('user_name', {
	            rules: [{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }],
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
	        <FormItem  label="用户名称">
	            {form.getFieldDecorator('user_name_cn', {
	            rules: [{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }],
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>

    </Row>
    
        
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
    
				<Col  md={12} sm={24}>
	        <FormItem  label="密码" hasFeedback>
	            {form.getFieldDecorator('password', {
		            rules: [
		            		{ required: true, message: '请输入至少6个字符的密码！', min: 6 },
		            		{
			                validator: this.validateToNextPassword,
			              },
		            ],
	            })(<Input.Password placeholder="请输入" />)}
	        </FormItem>
        </Col>
        
        <Col  md={12} sm={24}>
	        <FormItem  label="确认密码" hasFeedback>
	            {form.getFieldDecorator('confirm', {
		            rules: [
		            		{ required: true, message: '请确认您的密码！'},
		            		{
			                validator: this.compareToFirstPassword,
			              },
		            ],
	            })(<Input.Password placeholder="请输入" onBlur={this.handleConfirmBlur} />)}
	        </FormItem>
        </Col>
 
              
    </Row>
    
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="手机">
	            {form.getFieldDecorator('phone', {
	            rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
	        <FormItem  label="邮箱">
	            {form.getFieldDecorator('email', {
	            rules: [{ required: false}],
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>

    </Row>

   <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="部门">
	        	{form.getFieldDecorator('dept')(
	              <SelectDeptTree {...parentDeptTreeMethod} />
	          )}
	        </FormItem>
        </Col>
        <Col md={12} sm={24}>
	        <FormItem label="岗位">
	            {form.getFieldDecorator('post')(
	                <Select labelInValue placeholder="请选择" style={{ width: '100%' }}>
	                	{postForUser != undefined?postForUser.list.map((item,index) => {
	                		return <Option value={item.id}>{item.post_name}</Option>
	                	}):null}
	                </Select>
	            )}
	        </FormItem>
        </Col>

    </Row>
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
   		
   		  <Col md={12} sm={24}>
	        <FormItem label="状态">
	            {form.getFieldDecorator('enabled',{
	            	initialValue: "1",
	            })(
	                <Select placeholder="请选择" style={{ width: '100%' }}>
	                	<Option value="1">激活</Option>
	                    <Option value="0">锁定</Option>
	                </Select>
	            )}
	        </FormItem>
        </Col>
   		<Col md={12} sm={24}>
	        <FormItem label="角色">
	            {form.getFieldDecorator('auth_ids')(
	                <Select placeholder="请选择" style={{ width: '100%' }} mode="multiple">
	                	{authForUser != undefined?authForUser.list.map((item,index) => {
	                		return <Option value={item.auth_id}>{item.auth_name}</Option>
	                	}):null}
	                </Select>
	            )}
	        </FormItem>
        </Col>

    </Row>

</Form>
</Modal>
);
  }

}

export default CreateForm;